import styled from '@emotion/styled'
import { Button, Divider, List, Popover, Typography } from 'antd'
import React from 'react'
import { useProjects } from 'utils/project'
import { ButtonNoPadding } from './lib'
import { useProjectModal } from 'screens/project-list/util'

export function ProjectPopover() {
  const {open} = useProjectModal()
  const {data: projects, isLoading} = useProjects()
  const pinnedProjects = projects?.filter(project => project.pin)

  const content = <ContentContainer>
    <Typography.Text type="secondary">收藏项目</Typography.Text>
    <List>
      {
        pinnedProjects?.map(project => <List.Item key={project.id}>
          <List.Item.Meta title={project.name}></List.Item.Meta>
        </List.Item>)
      }
    </List>
    <Divider style={{margin: '1rem 0'}}/>
    <ButtonNoPadding type='link' onClick={open}>创建项目</ButtonNoPadding>
  </ContentContainer>
  return (
    <Popover placement='bottom' content={content}>
      <span>项目</span>
    </Popover>
  )
}

const ContentContainer = styled.div`
  min-width: 10rem;
`
